<template>
  <div class="footer">
    <img
         :class="['tips', showFlag ? '' : 'tips-overflow']"
         src="../assets/images/tips.png"
         alt="">
    <img class="slide-up slide-up-an"
         src="../assets/images/bill2022/home/buttom.png"
         alt="">
  </div>
</template>
<script>
export default {
  name: 'footerBox', 
  props: {
    showFlag: {
      type: Boolean,
      default: () => false,
    },
  },
  methods: {},
}
</script>
<style lang="less" scoped>
.footer {
  position: absolute;
  width: 100vw;
  height: 62px;
  bottom: 15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  z-index: 999999;
  .tips {
    width: 18.3rem;
    height: 6.7rem;
    margin-bottom: 1.8rem;
  }
  .tips-overflow{
    visibility: hidden;
  }
  .slide-up {
    width: 3.125rem;
    height: 3.125rem;
    margin-bottom: 6rem;
  }
  .slide-up-an {
    animation: slideUp 1s ease-in-out;
    -webkit-animation:slideUp 1s ease-in-out;
    -moz-animation: slideUp 1s ease-in-out;/*gecko内核的浏览器（如 Firefox）*/
	-o-animation: slideUp 1s ease-in-out;/*Opera 浏览器*/
	-ms-animation: slideUp 1s ease-in-out;/*IE8+*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }


  @keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }

    100% {
      transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
  @-webkit-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }

  @-moz-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
  @-o-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
  @-ms-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
        transform: translateY(0.4rem);
      transform: scale3d(1.2);
    }
  }
}
</style>
